<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的基础使用</title>
</head>
<!--导入vue的包-->
<script src="./js/vue.min.js"></script>
<script>
    // 设置html等待加载
    window.onload = function () {
//        定义 Vue 对象
        var vm = new Vue({
//        关联类选择器
            el:".div",
//        设置模板变量
            data:{
                content:"宏彦获水",
                aUrl:"https://www.baidu.com/s?wd=",
                isShow:true,
                list:["李白", "杜甫", "王维"],
                dict:{"name":"李白", "age":18},
                li_dic:[
                    {"name":"杜甫", "age":19},
                    {"name":"王维", "age":20}
                ],
                isOdd:""
            },
//        设置函数
            methods:{
                fnCast:function(num){
                        if (num % 2 == 0){
                            alert("偶数");
                        }
                        else {
                            alert("奇数");
                        }
                }
            }
        })
    }
</script>
<body>
    <div class="div">
        <!--v-model:数据双向绑定-->
        <input type="text" v-model="content">
        <!--v-bind:属性绑定-->
        <a v-bind:href="aUrl+content">
            <!--v-show:单个标签Display属性的设置-->
            <p v-show="isShow">
                <!--模板语法变量:大胡子方式-->
                百度:{{content}}
            </p>
        </a>
        <!--列表渲染(重复代码块的渲染)-->
        <ul>
            <!--列表格式数据渲染:-->
            <li v-for="(value,index) in list">
                编号:{{index}}-->名称:{{value}}
            </li>
            <!--字典格式数据渲染-->
            <li v-for="(value, key) in dict">
                {{key}}-->{{value}}
            </li>
            <!--列表嵌套字典数据格式渲染-->
            <li v-for="obj in li_dic">
                {{obj.name}}-->{{obj.age}}
            </li>
        </ul>
        <h1>奇偶判断</h1>
        <label>
            数字<input type="text" v-model="isOdd">
            <!--绑定点击事件-->
            <input type="button" @click="fnCast(isOdd)" value="判断">
        </label>
        <!--条件渲染:其本质是创建与删除标签-->
        <p v-if="isOdd == 20">成功输入隐藏数字!</p>
        <p v-else>该数字不是隐藏数字!</p>

    </div>
</body>
</html>